<template>
  <div class="dropdown" ref="dropdownRef">
    <a href="#" class="dropdown-toggle" @click.prevent="toggleOpen">
      {{ title }}
    </a>
    <ul v-if="isOpen" class="dropdown-menu">
      <slot></slot>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import useClickOutside from "../hooks/useClickOutside";

const props = defineProps<{
  title: string;
}>();

const isOpen = ref(false);
const dropdownRef = ref<null | HTMLElement>(null);

const toggleOpen = () => {
  isOpen.value = !isOpen.value;
};

const isClickOutside = useClickOutside(dropdownRef);

watch(isClickOutside, () => {
  if (isClickOutside.value && isOpen.value) {
    isOpen.value = false;
  }
});
</script>

<style scoped>
.dropdown {
  position: relative;

  .dropdown-toggle {
    color: #fff;
  }

  .dropdown-menu {
    position: absolute;
    top: 50px;
    left: -10px;
    min-width: 120px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
  }
}
</style>
